<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>文章类型管理</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js"></script>


    <style>
        td {
            vertical-align: middle !important;
        }

        .row {
            margin-bottom: 30px;
        }

        th {
            text-align: center;
        }

        #add {
            margin: 0 50px;
        }
    </style>
</head>
<body>
<!-- <h1>你好，世界！</h1> -->
<div class="container-fluid">
    <div class="row">
        <div>
            <ol class="breadcrumb">
                <li><a href="${pageContext.request.contextPath}/select/outlogin" class="btn btn-primary btn-sm"
                       role="button"><span class="glyphicon glyphicon-home pull-right" aria-hidden="true"></span>&nbsp;&nbsp;
                    主&nbsp;&nbsp; 页</a></li>
                <li class="active">文章管理</li>
                <li class="active">文章类型管理</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-sm-offset-6">
            <div class="input-group input-group-sm">
                <span class="input-group-addon">是否可用</span>
<%--                <select class="form-control" id="searchState" name="newsState">--%>
<%--                    <c:if test="${newsState==1}">--%>
<%--                        <option value="1" selected>可用</option>--%>
<%--                        <option value="0">不可用</option>--%>
<%--                        <option value="2">全部</option>--%>
<%--                    </c:if>--%>
<%--                    <c:if test="${newsState==0}">--%>
<%--                        <option value="1" >可用</option>--%>
<%--                        <option value="0" selected>不可用</option>--%>
<%--                        <option value="2">全部</option>--%>
<%--                    </c:if>--%>
<%--                    <c:if test="${newsState==2}">--%>
<%--                        <option value="1" >可用</option>--%>
<%--                        <option value="0" >不可用</option>--%>
<%--                        <option value="2" selected>全部</option>--%>
<%--                    </c:if>--%>

<%--                </select>--%>
                <span class="input-group-addon">按名称搜索</span>
                <input type="text" class="form-control" placeholder="输入包含的类型名称" id="searchWord" value="${newsTitle}"/>
                <span class="input-group-btn">
                    <button class="btn btn-success" type="button" id="search">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>
                </span>
            </div><!-- /input-group -->
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-2">
            <div class="btn-toolbar">
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-success" id="all-select">全选</button>
                    <button class="btn btn-info" id="inverse-select">反选</button>
                    <button class="btn btn-success" id="not-all-select">全不选</button>
                </div>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-primary" id="add">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加
                    </button>
                </div>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-danger" id="batch_delete">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 批量删除
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <table class="table table-sm table-bordered table-hover text-center">
                <tr>
                    <th><input type="checkbox" id="main-type-id"/></th>
                    <th>职位</th>
                    <th>名字</th>
                    <th>管理范围</th>
                    <th>所在地</th>
                    <th>电话号码</th>
                    <th>操作</th>
                </tr>
                    <c:forEach var="type" items="${list}">
                <tr>
                    <td><input type="checkbox" class="type-id" value="${type.userId}"/></td>
                            <c:forEach var="sytem" items="${type.systemRoles}">
                               <td>${sytem.roleName}</td>
                               <td>${type.userTrueName}</td>
                               <td>${sytem.roleDesc}</td>
                                <td>${type.userAddr}</td>
                                <td>${type.userIdentity}</td>
                            </c:forEach>
                    <td>
                        <a class="btn btn-warning btn-sm" id="bundle" >
                            <!-- typeId -->
                            <span class="glyphicon glyphicon-trash delete" aria-hidden="true" ></span> 删除
                        </a>
                        &nbsp;&nbsp;
                        <a class="btn btn-info btn-sm">
                            <span class="glyphicon glyphicon-pencil update" aria-hidden="true"></span> 修改
                        </a>

                        <a class="btn btn-link btn-sm" id="bunXQ">
                            <span class="glyphicon glyphicon-list-alt detail" aria-hidden="true" ></span> 详情
                        </a>
                    </td>
                </tr>
                    </c:forEach>

            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-5 col-sm-offset-1">
            <div class="input-group input-group-sm" style="margin-top: 20px">
<%--                <span class="input-group-addon">共计：${page.totalPage}页/${page.totalCount}条记录，每页</span>--%>
<%--                <select class="form-control" id="select">--%>
<%--                    <c:if test="${page.rows==3}">--%>
<%--                        <option value="3" selected>3</option>--%>
<%--                        <option value="6">6</option>--%>
<%--                        <option value="9">9</option>--%>
<%--                    </c:if>--%>
<%--                    <c:if test="${page.rows==6}">--%>
<%--                        <option value="3">3</option>--%>
<%--                        <option value="6"  selected>6</option>--%>
<%--                        <option value="9">9</option>--%>
<%--                    </c:if>--%>
<%--                    <c:if test="${page.rows==9}">--%>
<%--                        <option value="3" >3</option>--%>
<%--                        <option value="6">6</option>--%>
<%--                        <option value="9" selected>9</option>--%>
<%--                    </c:if>--%>
<%--                </select>--%>
                <span class="input-group-addon">条，跳转到</span>
                <input type="text" class="form-control" placeholder="请输入页码数" id="pages">
                <span class="input-group-btn">
					<button class="btn btn-success btn-sm" type="button" id="jump">跳转
						<span class="glyphicon glyphicon-send" aria-hidden="true"></span></button>
				</span>
            </div>
        </div>
        <div class="col-sm-4 col-sm-offset-1" style="margin-left:13%">
            <nav aria-label="Page navigation">
<%--                <ul class="pagination pagination-sm">--%>
<%--                    <li><a href="${pageContext.request.contextPath}/select/wenzhang?newsTitle=${newsTitle}&newsState=${newsState}&rows=${page.rows}">首页</a></li>--%>


<%--                    <c:if test="${page.currentPage==1}">--%>
<%--                        <li class="disabled"><a href="#">«</a></li>--%>
<%--                    </c:if>--%>
<%--                    <c:if test="${page.currentPage>1}">--%>
<%--                        <li>--%>
<%--                            <a href="${pageContext.request.contextPath}/select/wenzhang?currentPage=${page.currentPage-1}&rows=${page.rows}&newsState=${newsState}&newsTitle=${newsTitle}">«</a>--%>
<%--                        </li>--%>
<%--                    </c:if>--%>


<%--                    <c:forEach begin="1" end="${page.totalPage}" var="i">--%>
<%--                        <c:if test="${page.currentPage==i}">--%>
<%--                            <li class="active">--%>
<%--                                <a href="${pageContext.request.contextPath}/select/wenzhang?currentPage=${i}&rows=${page.rows}&newsState=${newsState}&newsTitle=${newsTitle}">第${i}页</a>--%>
<%--                            </li>--%>
<%--                        </c:if>--%>
<%--                        <c:if test="${page.currentPage!=i}">--%>
<%--                            <li>--%>
<%--                                <a href="${pageContext.request.contextPath}/select/wenzhang?currentPage=${i}&rows=${page.rows}&newsState=${newsState}&newsTitle=${newsTitle}">第${i}页</a>--%>
<%--                            </li>--%>
<%--                        </c:if>--%>
<%--                    </c:forEach>--%>

<%--                    <c:if test="${page.currentPage==page.totalPage}">--%>
<%--                        <li class="disabled"><a href="#">»</a></li>--%>
<%--                    </c:if>--%>
<%--                    <c:if test="${page.currentPage<page.totalPage}">--%>
<%--                        <li>--%>
<%--                            <a href="${pageContext.request.contextPath}/select/wenzhang?currentPage=${page.currentPage+1}&rows=${page.rows}&newsState=${newsState}&newsTitle=${newsTitle}">»</a>--%>
<%--                        </li>--%>
<%--                    </c:if>--%>

<%--                    <li><a href="${pageContext.request.contextPath}/select/wenzhang?currentPage=${page.totalPage}&newsState=${newsState}&newsTitle=${newsTitle}&rows=${page.rows}">尾页</a></li>--%>
<%--                </ul>--%>
            </nav>
        </div>
    </div>
</div>
<script type="text/javascript">
    $("#all-select").on("click",function (){
        $(".type-id,#main-type-id").prop("checked",true);
    })
    $(".type-id").on("click",function (){
        $("#main-type-id").prop("checked",$(".type-id").length == $(".type-id:checked").length);
    })
    $("#not-all-select").on("click",function (){
        $(".type-id,#main-type-id").prop("checked",false);
    })
    $("#inverse-select").on("click",function (){
        $.each($(".type-id"),function (i,n){
            $(n).prop("checked",!$(n).prop("checked"))
        })
        $("#main-type-id").prop("checked",$(".type-id").length == $(".type-id:checked").length);
    })
    $("#main-type-id").on("click",function (){
        $(".type-id").prop("click",$(this).prop("checked"));
    })
    $("#add").on("click",function (){
        location.href = "${pageContext.request.contextPath}/select/toadd";

    })
    $("#btn btn-danger btn-sm").on("click",function (){
        location.href = "${pageContext.request.contextPath}/select/toadd";
    })
    $("#search").click(function (){
        let state = $("#searchState").val();
        let words = $("#searchWord").val().trim();
        window.location.href="${pageContext.request.contextPath}/select/wenzhang/?newsState="+state+"&newsTitle="+words;
    })

    $("#jump").click(function (){
        window.location.href="${pageContext.request.contextPath}/select/wenzhang/?currentPage="
            + $("#pages").val()+"&rows="+$("#select").val()+"&newsState="+$("#searchState").val()+"&newsTitle="+$("#searchWord").val()
    })

    $("#select").change(function (){
        window.location.href="${pageContext.request.contextPath}/select/wenzhang/?rows="
            +$(this).val()+"&newsState="+$("#searchState").val()+"&newsTitle="+$("#searchWord").val()
    })
</script>
</body>
</html>
